
<div data-page="photo-browser" class="page">
  <div class="navbar">
    <div class="navbar-inner">
      <div class="left"><a href="index.html" class="back link icon-only"><i class="icon icon-back"></i></a></div>
      <div class="center">Photo Browser</div>
      <div class="right"><a href="#" class="open-panel link icon-only"><i class="icon icon-bars"></i></a></div>
    </div>
  </div>
  <div class="page-content">
    <div class="content-block">
      <p>Photo Browser is a standalone and highly configurable component that allows to open window with photo viewer and navigation elements with the following features:</p>
      <ul>
        <li>Swiper between photos</li>
        <li>Multi-gestures support for zooming</li>
        <li>Toggle zoom by double tap on photo</li>
        <li>Single click on photo to toggle Exposition mode</li>
      </ul>
      <p>Photo Browser could be opened in a three ways - as a Standalone component, in Popup, and as separate Page:</p>
      <div class="row">
        <div class="col-33"><a href="#" class="button button-raised ks-pb-standalone">Standalone</a></div>
        <div class="col-33"><a href="#" class="button button-raised ks-pb-popup">Popup</a></div>
        <div class="col-33"><a href="#" class="button button-raised ks-pb-page">Page</a></div>
      </div>
    </div>
    <div class="content-block">
      <p>For Popup and Standalone types, Photo Browser suppots 2 default themes - default Light (like in previous examples) and Dark theme. Here is a Dark theme examples:</p>
      <div class="row">
        <div class="col-50"><a href="#" class="button button-raised ks-pb-standalone-dark">Standalone</a></div>
        <div class="col-50"><a href="#" class="button button-raised ks-pb-popup-dark">Popup</a></div>
      </div>
    </div>
    <div class="content-block">
      <p>Photo Browser also supports lazy loading for passed images:</p>
      <p><a href="#" class="button button-raised ks-pb-lazy">Lazy Loading Images</a></p>
    </div>
  </div>
</div>